<template>
    <div class="table-template">
        <template>
            <div class="PublicTable">
                <!-- 主题el-table一些设置表头可根据情况添加 -->
                <el-table
                    ref="tables"
                    stripe :data="tableData" style="width: 100%;"
                    :header-cell-style="{background:'rgb(242, 243, 245)'}" :height="tableHeight"
                    :border="configFlag.border || false"
                    @selection-change="handleSelectionChange"
                >
                    <!-- 全选单选 -->
                    <el-table-column v-if="configFlag.selection" align="center" width="55" type="selection" />

                    <!-- 序号列 -->
                    <el-table-column v-if="configFlag.index" align="center" width="100" type="index" :index="1"
                                     :label="configFlag.indexName || '序号'"
                    />

                    <!-- 循环遍历表头展示数据 -->
                    <el-table-column v-for="item in tableTitleData" :key="item.value" :width="item.width || ''"
                                     :prop="item.value" :label="item.label" :align="item.align || 'center'"
                                     :sortable="item.sortable" header-align="center"
                    >
                        <template slot-scope="scope">
                            <!-- 根据需求添加效果 返回的slot可以优化.自己来吧. -->
                            <slot v-if="item.slotName" :scope="scope" :name="item.slotName" />
                            <div v-else>
                                <span>{{ scope.row[item.value] }}</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-if="configFlag.needPage" background style="text-align: right; margin-top: 10px;"
                               :current-page="pager.pageNo" :page-size="pager.pageSize" :total="pager.totalCount"
                               layout="total, sizes, prev, pager, next, jumper" class="table-pagination"
                               @size-change="sizeChange"
                               @current-change="currentChange"
                />
            </div>
        </template>
    </div>
</template>

<script>
export default {
    name: 'TablePane',
    components: {},
    props: {
        tableTitleData: { // 表头数据  文案和绑定值，以及需要特殊处理的slot
            type: Array,
            default: () => []
        },

        tableData: {
            type: Array, // 后台数据
            default: () => []
        },

        pager: { // 分页数据
            type: Object,
            default: () => {
                return {}
            }
        },

        configFlag: {// 配置  其他table配置依次添加
            type: Object,
            default: () => {
                return {
                    needPage: false, // 是否需要排序
                    selection: false, // 是否需要多选
                    index: false // 是否需要序号
                    // 这里不全面，可根据实际情况添加
                }

            }

        },
        tableHeight: { // 可以监听屏幕高度获取。
            // 高度
            type: Number,
            default: () => null
        }
    },
    methods: {
        // 翻页
        sizeChange(val) {
            this.$emit('handleSizeChange', val)
        },

        // 设置条数
        currentChange(val) {
            this.$emit('handleCurrentChange', val)
        },

        // 多选
        handleSelectionChange(val) {
            this.$emit('handleSelectionChange', val)
        }
    }
}
</script>

<style lang="scss">
.table-template {
    .el-table {
        //color: #333;
        .el-table__header-wrapper {
            .has-gutter {
                //color: #333 !important;
                tr {
                    th {
                        color: rgb(29, 33, 41);
                        font-size: 14px;
                        font-weight: 500;
                    }
                }
            }
        }
    }
    .table-pagination {
        background: #fff;
        margin-bottom: 20px;
        padding: 5px;
        text-align: right;
    }
}
</style>
